<template>
  <el-dialog
    v-model="visible"
    title="新增规则"
    width="50%"
    :before-close="handleClose"
  >
    <el-form :model="form" label-width="120px">
      <el-form-item label="条件名称">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="字段">
        <el-select v-model="form.field" placeholder="请选择字段">
          <el-option
            v-for="item in fields"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="解析成json">
        <el-checkbox v-model="form.parseJson" />
      </el-form-item>
      <template v-if="form.parseJson">
        <el-form-item label="key路径">
          <el-input v-model="form.keyPath" />
        </el-form-item>
        <el-form-item label="运算符">
          <el-select
            v-model="form.jsonValueOperator"
            placeholder="请选择运算符"
          >
            <el-option label="=" value="=" />
            <el-option label=">" value=">" />
            <el-option label="<" value="<" />
            <el-option label="like" value="like" />
          </el-select>
        </el-form-item>
        <el-form-item label="值">
          <div style="display: flex; gap: 10px">
            <el-input v-model="form.jsonValue" />
            <el-select
              v-model="form.jsonValueType"
              placeholder="值类型"
              style="width: 120px"
            >
              <el-option label="number" value="number" />
              <el-option label="string" value="string" />
              <el-option label="date" value="date" />
            </el-select>
          </div>
        </el-form-item>
      </template>
      <template v-else>
        <el-form-item label="key表达式">
          <el-input v-model="form.keyExp" />
        </el-form-item>
        <el-form-item label="key/value分割符">
          <el-input v-model="form.seperator" />
        </el-form-item>
        <el-form-item label="值表达式">
          <el-input v-model="form.valueExp" />
        </el-form-item>
        <el-form-item label="匹配值">
          <el-input v-model="form.value" />
        </el-form-item>
      </template>
      <el-form-item label="描述">
        <el-input v-model="form.description" type="textarea" />
      </el-form-item>
    </el-form>

    <el-divider />
    <el-form-item label="测试文本">
      <el-input
        v-model="testText"
        type="textarea"
        :rows="4"
        placeholder="请输入测试文本"
        @input="resetTestResult"
      />
    </el-form-item>
    <div style="text-align: right; margin-bottom: 20px">
      <el-button :type="testButtonType" @click="handleTest">
        {{
          testResult === null ? '测试' : testResult ? '测试通过' : '测试失败'
        }}
      </el-button>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import ConditionModel from '@/models/ConditionModel'
import useApi from '@/core/apiStore'
import { LOG_RESULT_FIELDS as fields } from '@/config'

const apiStore = useApi()

const props = defineProps({
  updateCallback: {
    type: Function,
    required: true,
  },
})

const visible = ref(false)
const form = ref(new ConditionModel())
const testText = ref('')
const testResult = ref<boolean | null>(null)

const testButtonType = computed(() => {
  return testResult.value === null
    ? 'primary'
    : testResult.value
      ? 'success'
      : 'danger'
})

const show = (condition: ConditionModel | null = null) => {
  console.log('show-condition', condition)
  form.value.update(condition || new ConditionModel())
  visible.value = true
}

const handleClose = () => {
  visible.value = false
}

const handleCancel = () => {
  visible.value = false
}

const handleConfirm = async () => {
  if (!form.value.validate()) {
    return
  }

  const shouldClose = await props.updateCallback(form.value)
  if (shouldClose) {
    visible.value = false
    form.value.reset()
  }
}

const resetTestResult = () => {
  testResult.value = null
}

const handleTest = async () => {
  try {
    const {
      data: { result },
    } = await apiStore.testCondition({
      condition: form.value,
      testText: testText.value,
    })
    testResult.value = result
    console.log('测试结果:', result)
  } catch (error) {
    console.error('测试失败:', error)
    testResult.value = false
  }
}

defineExpose({
  show,
})
</script>
